<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>

    <script src="../js/zepto.min.js"></script>
    <script>
        $(function(){


        });

    </script>
</head>

<body ontouchstart>
<div class="page-hd">
    <h1 class="page-hd-title">
        头像认证/图片/图片排版
    </h1>
    <p class="page-hd-desc">认证可不添加认证效果</p>
</div>
   <div class="page-bd-15">
       <div class="weui-cells__title">圆形头像</div>
       <div class="weui-avatar-circle">
           <img src="../favicon.png">
           <span class="weui-icon-success weui-icon-safe-warn"></span>
       </div>
       <div class="weui-cells__title">方形头像</div>
       <div class="weui-avatar">
           <img src="../favicon.png"><span class="weui-icon-success weui-icon-safe-warn"></span>

       </div>
       <h3>响应式图片</h3>
       <img src="" class="img-max">

       <h3>图片盒子</h3>
       <div class="img-box">
               <img src="../images/2.jpg">
           <div class="img-box-title" >喜欢李白,张飞和刘备一起来打野,测试一下王者荣耀是否好玩,还要测试只显示两行文字多于三个点</div>
       </div>

  <h3>图片排版,支持2-9张图</h3>
       <div class="weui-feeds">
           <ul>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
           </ul>
       </div>
       <h3>3张图</h3>
       <div class="weui-feeds">
           <ul>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
               <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
           </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
           </ul>
       </div>
       <h3>4张图</h3>
       <div class="weui-feeds">
           <ul>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
           </ul>
       </div>
       <h3>5张图</h3>
       <div class="weui-feeds">
           <ul>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
               <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
           </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
           </ul>
       </div>
       <h3>6张图</h3>
       <div class="weui-feeds">
           <ul>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
           </ul>
       </div>
       <h3>7张图</h3>
       <div class="weui-feeds">
           <ul>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
           </ul>
       </div>
       <h3>8张图</h3>
       <div class="weui-feeds">
           <ul>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
           </ul>
       </div>
       <h3>9张图</h3>
       <div class="weui-feeds">
           <ul>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
               <li>
                   <span style="background-image:url(../images/1.jpg);background-repeat:no-repeat;background-size:cover;"></span>
               </li>
           </ul>
       </div>
   </div>

<br>
<br>
<div class="weui-footer weui-footer_fixed-bottom">
    <p class="weui-footer__links">
        <a href="../index.html" class="weui-footer__link">WeUI首页</a>
    </p>
    <p class="weui-footer__text">Copyright &copy; Yoby</p>
</div>
</body>
</html>